import { BasicComponent } from './basic/basic.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
import { ComplexFormComponent } from './complex-form/complex-form.component';
import { Demo8Component } from './demo8/demo8.component';
import { SizeComponent } from './size/size.component';
import { WithDrawerComponent } from './with-drawer/with-drawer.component';

export const FormConfig = {
  location: 'Form',
  description: `表单用于搜集不同类型的用户输入，包括数据收集、校验及提交功能。表单共分四个区域：标题、表单标签、表单域、按钮提交区。
    lv-form: 表单统一设置，包括 lv-form-label 宽度，冒号显示;
    lv-form-column: 表单列容器;
    lv-form-item: 表单单元项容器;
    lv-form-label: 域标签，可配置必选，冒号;
    lv-from-control: 表单内容，主要用于错误提示配置，支持嵌套.
  `,
  description_en: `Forms are used to collect different types of user's input, including data collection, verification and submission functions. The form is divided into four areas: title, form label, form field and submission button area.
    lv-form: Unified settings of the form , including the width of lv-form-label and the display of colon;
    lv-form-column: Form column container;
	  lv-form-item: Form item container of the form;
	  lv-form-label: Form label, configurable required, colon;
		lv-from-control: Form content, which is generally used in the configuration of error prompt. Nesting is supported.
	`,
  component: [
    {
      demo: Demo2Component,
      codePath: 'showcase/form/demo2/demo2.component',
      demoTitle: '校验与错误提示',
      demoTitle_en: 'Verification',
      demoDescription: '在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。',
      demoDescription_en:
        'Under the premise of preventing users from making mistakes, let users find and correct errors as soon as possible.',
    },
    {
      demo: BasicComponent,
      codePath: 'showcase/form/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '基础表单。',
      demoDescription_en: 'Basic forms.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/form/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'size',
      demoDescription: '表单大尺寸。',
      demoDescription_en: 'The large size of form.',
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/form/demo8/demo8.component',
      demoTitle: '布局：垂直',
      demoTitle_en: 'Layout: Vertical',
      demoDescription: '域标签和表单内容垂直布局。',
      demoDescription_en: 'Field labels and form content are laid out vertically.',
      devDebug: true,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/form/demo3/demo3.component',
      demoTitle: '布局：多列',
      demoTitle_en: 'Layout: Multiple Columns',
      demoDescription: '常用表单多列布局，每列宽度可以自由设置（含固定宽度，百分比及其自适应）。',
      demoDescription_en:
        'Common form multi-column layout, each column width can be freely set (including fixed width, percentage and its adaptive).',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/form/demo4/demo4.component',
      demoTitle: '布局：单列',
      demoTitle_en: 'Layout: Single Column',
      demoDescription: '常用表单单列布局，域标签取最长宽度。',
      demoDescription_en: 'Common form single-column layout, label to take the longest width.',
    },

    // {
    //   demo: Demo5Component,
    //   codePath: 'showcase/form/demo5/demo5.component',
    //   demoTitle: '布局：自定义',
    //   demoTitle_en: 'Layout: Custom',
    //   demoDescription: '常用表单布局, 利用lv-group可实现多列布局,自定义布局。',
    //   demoDescription_en: 'Common form layout, use lv-group to achieve multi-column layout, custom layout.'
    // },
    {
      demo: DynamicFormComponent,
      codePath: 'showcase/form/dynamic-form/dynamic-form.component',
      demoTitle: '动态添加子项',
      demoTitle_en: 'Dynamically Add Children',
      demoDescription: '通过FormArray动态添加子项。',
      demoDescription_en: 'Add children dynamically through FormArray.',
    },
    {
      demo: ComplexFormComponent,
      codePath: 'showcase/form/complex-form/complex-form.component',
      demoTitle: '复杂表单',
      demoTitle_en: 'Complex Form',
      demoDescription: '复杂表单, 支持嵌套。',
      demoDescription_en: 'Complex forms, support nesting.',
    },
    {
      demo: WithDrawerComponent,
      codePath: 'showcase/form/with-drawer/with-drawer.component',
      demoTitle: '在抽屉中使用',
      demoTitle_en: 'Used in Drawer',
      demoDescription: '在抽屉中使用，提交失败自动滚动到第一个错误字段。',
      demoDescription_en: 'Used in Drawer. If the submission fails, the system automatically scrolls to the first error field.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  snippet: `
    <lv-form [formGroup]="formGroup">
      <lv-form-item>
        <lv-form-label lvRequired>\${1:Name</lv-form-label}>
        <lv-form-control>
          <input lv-input type="\${2:text}" formControlName="\${3:name}" />
        </lv-form-control>
      </lv-form-item>
    </lv-form>
	`,
  mApi: [
    {
      selector: 'lv-form',
      name: 'lv-form',
      name_en: 'lv-form',
      api: [
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: `表单大小。`,
          description_en: `size of form.`,
        },
        {
          attribute: 'lvLabelWidth',
          type: 'string',
          default: 'auto',
          description: `域标签宽度，支持px，%，auto，auto 表示取最大 label 宽度。`,
          description_en: `Width of field label. Supports 'px, %, auto', 'auto' means the width is maximum.`,
        },
        {
          attribute: 'lvLabelColon',
          type: 'boolean',
          default: 'true',
          description: `域标签是否显示冒号。`,
          description_en: `Whether the field labels display colons.`,
          global: true,
        },
        {
          attribute: 'lvKeepRequiredWidth',
          type: 'boolean',
          default: '--',
          description: `非必选是否保留 * 宽度。`,
          description_en: `Whether to keep * width if not required.`,
        },
        {
          attribute: 'lvLayout',
          type: 'LvFormLayoutType',
          default: 'vertical',
          description: `表单布局，垂直布局：vertical、水平布局：horizontal`,
          description_en: `Form layout`,
          global: true,
        },
      ],
      event: [],
    },
    {
      selector: 'lv-form-column',
      name: 'lv-form-column',
      name_en: 'lv-form-column',
      api: [
        {
          attribute: 'lvWidth',
          type: 'string',
          default: 'auto',
          description: `列宽度，支持 px，%，auto 。`,
          description_en: `Width of form column. Supports 'px, %, auto'.`,
        },
      ],
      event: [],
    },
    {
      selector: 'lv-form-label',
      name: 'lv-form-label',
      name_en: 'lv-form-label',
      api: [
        {
          attribute: 'lvRequired',
          type: 'boolean',
          default: 'false',
          description: `是否必选。`,
          description_en: `Whether required.`,
        },
        {
          attribute: 'lvColon',
          type: 'boolean',
          default: 'true',
          description: `是否显示冒号。`,
          description_en: `Whether to display the colon.`,
        },
        {
          attribute: 'lvLabelTip',
          type: 'string | TemplateRef',
          default: '--',
          description: `label右侧的提示。`,
          description_en: `Tips on the right of the label.`,
        },
        {
          attribute: 'lvKeepRequiredWidth',
          type: 'boolean',
          default: '--',
          description: `非必选是否保留 * 宽度。`,
          description_en: `Whether to keep * width if not required.`,
          global: true,
        },
      ],
      event: [],
    },
    {
      selector: 'lv-form-control',
      name: 'lv-form-control',
      name_en: 'lv-form-control',
      api: [
        {
          attribute: 'lvErrorTip',
          type: 'string | object | TemplateRef',
          default: 'null',
          description: `错误提示内容,支持字符串,对象按错误key对应如{required:'必选项', maxLength:'最大支持xx个字符'},支持自定义模板。`,
          description_en: `Content of error prompt. String is supported. Object correspond to error key, such as {required:'required option', maxLength:'maximum number of string supported'}. Customised template is supported.`,
        },
        {
          attribute: 'lvHelp',
          type: 'string | TemplateRef',
          default: 'null',
          description: `帮助文字, 支持字符串，支持自定义模板`,
          description_en: `Content of help prompt. String is supported. Customised template is supported.`,
        },
        {
          attribute: 'lvErrorType',
          type: 'default | multiple | customer',
          default: 'default',
          description: `错误提示类型, default为表单项下方出错误提示。multiple支持多个提示同时展示，并把错误的标红。`,
          description_en: `Type of error prompt. Error prompt is under the form item by default.Multiple messages can be displayed at the same time, and errors are marked in red by multiple.`,
        },
        {
          attribute: 'lvErrorTipPosition',
          type: 'bottom | tooltip',
          default: 'bottom',
          description: `error提示位置，tooltip用于狭小区域显示。`,
          description_en: `Error prompt position. The tooltip is used to display the error information in a narrow area.`,
        },
      ],
      event: [],
    },
  ],
};
